<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            background-color: #2E3E9C;
        }

        #wrap {
            width: 400px;
            height: 450px;
            background-color: #fff;
            position: fixed;
            left: 50%;
            right: 50%;
            top: 50%;
            bottom: 50%;
            margin-top: -225px;
            margin-left: -200px;
        }

        #header {
            margin: 15px 15px 0;
            width: 100%;
        }

        .main-container {
            margin: 35px 15px 0;
        }

        #body-register {
            display: none;
        }

        .link {
            display: inline-block;
            padding: 8px 0px;
            margin: 0 10px;
            cursor: pointer;
            letter-spacing: 2px;
        }

        .link-active {
            color: #1a1a1a;
            font-weight: 600;
            border-bottom: 4px solid #0084ff;
        }

        .body-row {
            border-bottom: 1px solid #ebebeb;
            height: 48px;
            margin-top: 15px;
        }

        .body-row input {
            height: 100%;
            width: 100%;
            border: none;
            outline: none;
            font-size: 16px;
        }

        #yzm {
            float: left;
            width: 50%;
        }

        #zw {
            float: left;
            width: 20%;
            position: relative;
            bottom: -10px;
            background-color: #fff;
            height: 100%;
        }

        #yzm-img {
            float: left;
            height: 100%;
            width: 30%;
        }

        #yzm-img img {
            width: 100%;
            height: 100%;
        }

        .btn {
            color: #fff;
            background-color: #0084ff;
            width: 100%;
            height: 36px;
            border: 1px solid #0084ff;
            outline: none;
            display: inline-block;
            border-radius: 3px;
        }

        #register-yz {
            width: 60%;
        }

        #register-yz-btn {
            text-align: center;
            width: 35%;
            cursor: pointer;
            color: #fff;
            background-color: #0084ff;
            border: 1px solid #0084ff;
            outline: none;
            display: inline-block;
            border-radius: 3px;
            padding: 5px;
        }
        #footer{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 5px;
            text-align: center;
            color: white;
            font-size: 12px;
        }
    </style>


</head>
<body>
<div id="wrap">
    <div id="header">
        <div class="link link-active">账户登录</div>
        <div class="link">邮箱注册</div>
    </div>

    <div id="body-login" class="main-container">
        <div class="body-row">
            <input type="text" value="" id="login-username" placeholder="请输入QQ邮箱账号">
        </div>
        <div class="body-row">
            <input type="password" value="" id="login-password" placeholder="请输入密码">
        </div>
        <div class="body-row">
            <input type="text" id="yzm" placeholder="请输入验证码">
            <div id="zw"></div>
            <div id="yzm-img"><img src="login/getVerifyCode" alt=""></div>
        </div>
        <p style="text-align: right;margin: 5px 0 20px;cursor: pointer;color: darkgray;">忘记密码</p>
        <p style="margin: 10px 0;font-size: 14px;color: darkgray;">
            <label>
                <input type="checkbox" checked>
                我已同意《协议》《隐私保护指引》并维护网络安全的相关法律
            </label>
        </p>
        <button class="btn" id="login-btn">立即登录</button>
    </div>
    <!--注册-->
    <div id="body-register" class="main-container">
        <div class="body-row">
            <input type="text" id="register-username"  placeholder="请输入QQ邮箱账号">
        </div>
        <div class="body-row">
            <input type="password" id="register-password"  placeholder="请输入密码">
        </div>
        <div class="body-row">
            <input type="password" id="register-password-again" placeholder="请确认密码">
        </div>
        <div class="body-row">
            <input type="text" id="register-yz" placeholder="请输入邮箱验证码">
            <button class="" id="register-yz-btn">获取验证码</button>
        </div>
        <p style="margin: 10px 0;font-size: 14px;color: darkgray;">
            <label>
                <input type="checkbox" checked>
                我已同意相关法律法规和本网站的相关规定，如有违规，愿承担相应的法律责任。
            </label>
        </p>
        <button class="btn" id="register-btn">立即注册</button>
    </div>
</div>


<div id="footer">
    <p>Running by SpringBoot and MyBatis-Plus on Linux version 1.3.2</p>
    <p>
        Copyright © 2020 - 2021 星时代爪哇  scsoul.top All Rights Reserved.

        <a href="https://beian.miit.gov.cn/" target="_blank" style="color: white; text-decoration: none;">蜀ICP备2020030393号-1</a>
    </p>
</div>
<script th:src="@{/js/jquery-3.4.1.js}"></script>
<script th:src="@{/js/MiniDialog-es5.min.js}"></script>
<script>
    var sendYzmLock = false;

    $(function () {
        $(".link").click(function () {
            var index = $(this).index();
            $(this).addClass("link-active").siblings().removeClass("link-active");
            if (index == 0) {
                $("#body-login").show();
                $("#body-register").hide();
            } else {
                $("#body-login").hide();
                $("#body-register").show();
            }
        })

        $("#login-btn").click(function () {
            var username = $("#login-username").val();
            var password = $("#login-password").val();
            var yzm = $("#yzm").val();
            if (username == "" || password == "") {
                Dialog.warn( "警告", "邮箱或者密码不能为空");
                return false;
            }
            $(this).text("登录中···")
            $.post("login/check", {
                email: username,
                password: password,
                yzm: yzm
            }, function (resp) {
                if(resp.code == 0){
                    location.href="admin"
                }else {
                    Dialog.error( "错误", resp.msg);
                }
                $("#login-btn").text("立即登录")
            })
        })

        $("#register-btn").click(function () {
            const username = $("#register-username").val();
            const password = $("#register-password").val();
            const passwordAgain = $("#register-password-again").val();
            const yzm = $("#register-yz").val();
            if (username == "" || password == ""||yzm=="") {
                Dialog.warn( "警告", "邮箱或者密码不能为空");
                return false;
            }
            if (password !== passwordAgain) {
                Dialog.warn( "警告", "两次输入的密码不一致");
                return false;
            }
            $.post("register", {
                email: username,
                password: password,
                yzm:yzm,
            }, function (resp) {
                if(resp.code == 0){
                    Dialog.success( "成功", resp.msg );
                }else if(resp.code == 499){
                    Dialog.error( "错误", resp.msg);
                }else if(resp.code == 700){
                    Dialog.error( "错误", resp.msg);
                }

            })
        })

        $("#yzm-img img").click(function () {
            $(this).attr("src", "login/getVerifyCode?id=" + Math.random());
        })

        $("#register-yz-btn").click(function () {
            if($("#register-username").val()==""){
                Dialog.warn( "警告", "请输入邮箱地址");
                return false;
            }
            if (sendYzmLock) {
                return false;
            }else {
                sendYzmLock=true;
            }
            $.post("register/yzm", {
                email: $("#register-username").val(),
            }, function (resp) {
            })
            var time = 60;
            var timer = setInterval(function () {
                $("#register-yz-btn").text(time + "秒后重新发送");
                time--;
                if(time<0){
                    clearInterval(timer);
                    sendYzmLock=false;
                    $("#register-yz-btn").text("重新获取验证码");
                }
            }, 1000);
        })
    })
</script>
</body>
</html>